<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        clearable
        class="filter-item"
        style="width: 200px"
        placeholder="请输入疾病名称"
      />
      <el-input
        v-model="listQuery.question"
        clearable
        class="filter-item"
        style="width: 200px"
        placeholder="请输入提问内容"
      />
      <el-button
        v-permission="['GET /admin/service/type/list']"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查找
      </el-button>
      <el-button
        v-permission="['POST /admin/service/type/add']"
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >添加
      </el-button>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column
        width="140"
        align="center"
        label="ID"
        prop="id"
        sortable
      />

      <el-table-column align="center" label="疾病名称" prop="name"/>

      <el-table-column align="center" label="提问内容" prop="question"/>
      <el-table-column align="center" label="状态" prop="isActive" width="140">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isActive == 0" type="danger">无效</el-tag>
          <el-tag v-else>有效</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="适用性别" prop="isActive" width="140">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.sex == 1" type="success">男</el-tag>
          <el-tag v-else-if="scope.row.sex == 2" type="danger">女</el-tag>
          <el-tag v-else>不限</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建日期" prop="createTime" width="200"/>

      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding fixed-width"
        width="400%"
      >
        <template slot-scope="scope">
          <el-button
            v-permission="['GET /admin/service/type/update']"
            type="primary"
            size="mini"
            @click="handleUpdate(scope.row)"
          >编辑
          </el-button>

          <el-button
            v-permission="['GET /admin/role/permissions']"
            type="primary"
            size="mini"
            @click="handlePermission(scope.row)"
          >指标维护
          </el-button
          >

          <el-button
            v-permission="['GET /admin/role/permissions']"
            type="primary"
            size="mini"
            @click="handleProblemMaintenance(scope.row)"
          >问题维护
          </el-button
          >

          <el-button
            v-permission="['GET /admin/role/permissions']"
            type="primary"
            size="mini"
            @click="handleIllnessDrug(scope.row)"
          >药品维护
          </el-button
          >

          <el-button
            v-permission="['POST /admin/service/type/delete']"
            type="danger"
            size="mini"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 指标配置对话框 -->
    <el-dialog title="指标维护" :visible.sync="permissionDialogFormVisible" width="80%">
      <el-checkbox-group v-model="assignedPermissions">
        <el-row :gutter="20">
          <el-col
            v-for="node in systemPermissions"
            :key="node.indexId"
            :span="6"
          >
            <el-checkbox :label="node.indexId">
              {{ node.indexName }}
            </el-checkbox>
          </el-col>
        </el-row>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="permissionDialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="updatePermission"
          :loading="permLoading"
        >确定
        </el-button
        >
      </div>
    </el-dialog>

    <!-- 问题配置对话框 -->
    <el-dialog title="问题维护" :visible.sync="problemDialogFormVisible" width="80%">
      <el-checkbox-group v-model="problemassignedPermissions">
        <el-row :gutter="20">
          <el-col
            v-for="node in problemsystemPermissions"
            :key="node.topicId"
            :span="6"
          >
            <el-checkbox :label="node.topicId">
              {{ node.topicName }}
            </el-checkbox>
          </el-col>
        </el-row>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="problemDialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="updateProblem"
          :loading="permLoading"
        >确定
        </el-button
        >
      </div>
    </el-dialog>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="140px"
        style="width: 700px; margin-left: 50px"
      >
        <el-form-item label="疾病名称" prop="name">
          <el-input v-model="dataForm.name"/>
        </el-form-item>

        <el-form-item label="提问内容" prop="question">
          <el-input v-model="dataForm.question"/>
        </el-form-item>

        <el-form-item label="有效状态" prop="isActive">
          <el-switch v-model="dataForm.isActive" :active-value="true"
                     :inactive-value="false"
                     active-text="有效"
                     inactive-text="无效"/>
        </el-form-item>

        <el-form-item label="适用性别" prop="sex">
          <el-radio-group v-model="dataForm.sex">
            <el-radio :label="0">不限</el-radio>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>


        <el-form-item label="知识科普1" prop="popular">
          <el-input type="textarea" :autosize="{ minRows: 4}" v-model="dataForm.popular"/>
        </el-form-item>

        <el-form-item label="知识科普2" prop="popularPercent">
          <el-input type="textarea" :autosize="{ minRows: 4}" v-model="dataForm.popularPercent"/>
        </el-form-item>

      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          v-if="dialogStatus == 'create'"
          type="primary"
          :loading="saveLoading"
          @click="createData"
        >确定
        </el-button>
        <el-button
          v-else
          type="primary"
          :loading="saveLoading"
          @click="updateData"
        >确定
        </el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<style>
</style>

<script>
  import {
    illnessList,
    illnessDelete,
    illnessCreate,
    illnessUpdate,
    illnessIndexAssigned,
    illnessAssignedUpdate,
    illnessTopic,
    illnessTopicUpdate
  } from '@/api/topic_answer'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  export default {
    name: 'Illness',
    components: { Pagination },
    data() {
      return {
        permissionDialogFormVisible: false,
        systemPermissions: null,
        assignedPermissions: null,
        permissionForm: {
          illnessId: undefined,
          indexList: []
        },
        permLoading: false,
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          name: undefined,
          question: undefined,
          sort: '',
          order: '',
          limit: 20
        },
        dataForm: {
          id: 0,
          name: undefined,
          name: undefined,
          enable: true
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '创建'
        },
        saveLoading: false,
        rules: {
          name: [{ required: true, message: '不能为空', trigger: 'blur' }],
          name: [{ required: true, message: '不能为空', trigger: 'blur' }],
          enable: [{ required: true, message: '不能为空', trigger: 'blur' }]
        },
        problemDialogFormVisible: false,
        problemsystemPermissions: null,
        problemassignedPermissions: null,
        problemForm: {
          illnessId: undefined,
          topicList: []
        }
      }
    },
    computed: {},
    created() {
      this.getList()
    },
    methods: {
      handleIllnessDrug(row) {
        // 携带query参数
        // console.log('=============================', row)
        this.$router.push({
          path: '/illness/drug',
          query: {
            illnessId: row.id
          }
        })
      },
      getList() {
        this.listLoading = true
        illnessList(this.listQuery)
          .then((response) => {
            this.list = response.data.data.list
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },
      handlePermission(row) {
        this.permissionDialogFormVisible = true
        this.permissionForm.illnessId = row.id
        illnessIndexAssigned(row.id).then((response) => {
          this.systemPermissions = response.data.data.allIndexList
          this.assignedPermissions = response.data.data.assignedIndexList
        })
      },

      handleProblemMaintenance(row) {
        this.problemDialogFormVisible = true
        this.problemForm.illnessId = row.id
        illnessTopic(row.id).then((response) => {
          this.problemsystemPermissions = response.data.data.allTopicList
          this.problemassignedPermissions = response.data.data.assignedTopicList
        })
      },
      updatePermission() {
        this.permLoading = true
        this.permissionForm.indexList = this.assignedPermissions
        illnessAssignedUpdate(this.permissionForm)
          .then(response => {
            this.permLoading = false
            this.permissionDialogFormVisible = false
            this.$notify.success({
              title: '成功',
              message: '指标维护成功'
            })
          })
          .catch(response => {
            this.permLoading = false
            this.$notify.error({
              title: '失败',
              message: response.data.errmsg
            })
          })
      },

      updateProblem() {
        this.permLoading = true
        this.problemForm.topicList = this.problemassignedPermissions
        illnessTopicUpdate(this.problemForm)
          .then(response => {
            this.permLoading = false
            this.problemDialogFormVisible = false
            this.$notify.success({
              title: '成功',
              message: '问题维护成功'
            })
          })
          .catch(response => {
            this.permLoading = false
            this.$notify.error({
              title: '失败',
              message: response.data.errmsg
            })
          })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      resetForm() {
        this.dataForm = {
          id: 0,
          name: undefined,
          name: undefined,
          enable: true
        }
      },
      handleCreate() {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      createData() {
        let that = this
        console.log(this.dataForm)
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            that.saveLoading = true
            illnessCreate(this.dataForm)
              .then((response) => {
                that.saveLoading = false
                that.getList()
                this.dialogFormVisible = false
                this.$notify.success({
                  title: '成功',
                  message: '添加成功'
                })
              })
              .catch((response) => {
                that.saveLoading = false
                this.$notify.error({
                  title: '失败',
                  message: response.data.errmsg
                })
              })
          }
        })
      },
      handleUpdate(row) {
        this.dataForm = Object.assign({}, row)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      updateData() {
        console.log(this.dataForm)
        let that = this
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            that.saveLoading = true
            illnessUpdate(this.dataForm)
              .then(() => {
                that.saveLoading = false
                that.getList()
                this.dialogFormVisible = false
                this.$notify.success({
                  title: '成功',
                  message: '更新成功'
                })
              })
              .catch((response) => {
                that.saveLoading = false
                this.$notify.error({
                  title: '失败',
                  message: response.data.errmsg
                })
              })
          }
        })
      },
      handleDelete(row) {
        illnessDelete(row.id)
          .then((response) => {
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
            this.getList()
          })
          .catch((response) => {
            this.$notify.error({
              title: '失败',
              message: response.data.errmsg
            })
          })
      }
    }
  }
</script>
